<template>
	<div>
		<div id="wapper">

			<my-header :headerParam="headerParam">
          <i class="iconEdit" @click=""></i>
			</my-header>

			<div id="jmsinfo">
				<div class="jmsinfo-title  firstLine clearfix">
					<span class="titleICon">
                     <i></i>
                   </span>
					<span class="titleText">客户信息</span>
					<div class="first_show">{{"待缴费&nbsp;&nbsp;"+jmsstates[jmsinfo.intentLevel]}}</div>
				</div>
				<div>
					<div class="item clearfix item2">
						<span class="item-flag">&#x3000;&#x3000;姓名</span>
						<div class="item-con">
							<p class="text">{{jmsinfo.name}}</p>
						</div>
					</div>

				</div>

				<div class="item clearfix">
					<span class="item-flag" ng-if="jsminfo.agentStatus">手机号码</span>
					<div class="item-con">
						<p class="text">{{jmsinfo.mobile}}</p>
					</div>
				</div>
				<div class="item clearfix">
					<span class="item-flag">详细地址</span>
					<div class="item-con">
						<p class="text">{{jmsinfo.address}}</p>
					</div>
				</div>

				<div class="item clearfix">
					<span class="item-flag"> 代理级别</span>
					<div class="item-con">
						<p class="text">{{aleval[jmsinfo.areaLevel]}}</p>
					</div>
				</div>
        <div class="item clearfix">
          <span class="item-flag">代理区域 </span>
          <div class="item-con">
            <p class="text">{{jmsinfo.storeAreaDescribe}}</p>
          </div>
        </div>
				<div class="item clearfix">
					<span class="item-flag">客户意愿</span>
					<div class="item-con">
						<p class="text">{{jmsstates[jmsinfo.intentLevel]}}</p>
					</div>
				</div>
				 <div class="item clearfix">
          <span class="item-flag">业务经理 </span>
          <div class="item-con">
            <p class="text">{{jmsinfo.name}}</p>
          </div>
        </div>
				<div class="item clearfix">
					<span class="item-flag">&#x3000;&#x3000;备注</span>
					<div class="item-con">
						<p class="text">{{jmsinfo.memo}} </p>
					</div>
				</div>
				<div class="item clearfix">
					<span class="item-flag">创建时间 </span>
					<div class="item-con">
						<p class="text">{{jmsinfo.gmtCreate }}</p>
					</div>
				</div>
       
				 
				<div class="jmsinfo-title clearfix">
					<span class="titleICon">
                     <i></i>
                   </span>
					<span class="titleText">代理信息</span>

				</div>
        
				<div class="item clearfix">
					<span class="item-flag">加盟商编号 </span>
					<div class="item-con">
						<p class="text">{{jmsinfo.storeCode}}</p>
					</div>
				</div>
				<div class="item clearfix">
					<span class="item-flag">代理商类型 </span>
					<div class="item-con">
						<p class="text">{{store[jmsinfo.type-1]}}</p>
					</div>
				</div>
				<div class="item clearfix">
					<span class="item-flag">商户类型 </span>
					<div class="item-con">
						<p class="text">{{storeType[jmsinfo.storeType]}}</p>
					</div>
				</div>
       
				<div class="item clearfix">
					<span class="item-flag">门店名称 </span>
					<div class="item-con">
						<p class="text">{{jmsinfo.storeName}}</p>
					</div>
				</div>
				<div class="item clearfix">
					<span class="item-flag">店面照片 </span>
					<div class="item-con dm-img-list">
						<img v-for="(item,index) in imgArr" :key="index" :src="imgPre+item.accessory" class="dm-img" />
					</div>
				</div>

				<div class="line"></div>

				<div v-show="changeHistory.length">
					<div class="line"></div>
					<div class="jmsinfo-title clearfix">
						<span class="titleICon">
                     <i></i>
                   </span>
						<span class="titleText">沟通记录</span>

					</div>
					<div class="line"></div>

					<div class="itemBox">
						<div class="timeLine"></div>
						<div class="timeBox">
							<div class="clearfix cutline" v-for="(item,index) in changeHistory" :key="index">
								<div class="item1 clearfix">
									<div class="item1-con">
										<p class="text gmttime">{{item.gmtCreate}}</p>
									</div>
								</div>
								<div class="item1 clearfix">
									<span class="item1-flag">意向状态</span>
									<div class="item1-con">
										<p class="text">{{jmsS[item.followStatus-1]}}</p>
									</div>
								</div>
								<div class="item1 clearfix">
									<span class="item1-flag">沟通内容</span>
									<div class="item1-con">
										<p class="text">{{item.contents}}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div v-show="paymentInfo.length">
					<div class="line"></div>
					<div class="jmsinfo-title clearfix">
						<span class="titleICon">
                     <i></i>
                   </span>
						<span class="titleText">缴费信息</span>

					</div>
					<div class="line"></div>
					<div class="clearfix " v-for="(item,index) in paymentInfo" :key="index">
						<div class="item clearfix">
							<span class="item-flag">金额</span>
							<div class="item-con">
								<p>{{item.moneySum}}万元</p>
							</div>
						</div>
						<div class="item clearfix">
							<span class="item-flag">说明</span>
							<div class="item-con">
								<p> </p>
							</div>
						</div>
						<div class="item clearfix" v-if="item.payType!=null">
							<span class="item-flag">打款方式</span>
							<div class="item-con">
								<p>{{payType[item.payType-1].name}}</p>
							</div>
						</div>
						<div class="item clearfix" v-if="item.gmtPay!=null">
							<span class="item-flag">打款时间</span>
							<div class="item-con">
								<p>{{item.gmtPay}}</p>
							</div>
						</div>
						<div class="item clearfix" v-if="item.gmtApply!=null">
							<span class="item-flag">审核时间</span>
							<div class="item-con">
								<p>{{item.gmtApply}}</p>
							</div>
						</div>
						<div class="line"></div>

					</div>
				</div>
        <div>
          <div class="line"></div>
          <div class="jmsinfo-title clearfix">
                   
                   <span class="titleICon">
                     <i></i>
                   </span>
                   <span class="titleText">签约信息</span> 
                   
          </div>
           <div class="line"></div>
           <div class="jmsinfo-title clearfix">
                   
                   <span class="titleICon">
                     <i></i>
                   </span>
                   <span class="titleText">开业信息</span> 
                   
          </div>
           <div class="line"></div>
        </div>
				<div class="btnGroup">
					<span class="state changeInfoBtn" v-show="!$route.params.status" @click="openshow('stateflag')">状态追踪</span>
					<span class="payBtn changeInfoBtn" v-show="!$route.params.status" @click="payBoxShow">发起缴费</span>
				</div>
				<div class="item">

					<router-link v-show="false" :to="{name:'editJmsInfo',params:{storeCode:this.jmsinfo.storeCode,jmsInfo:this.jmsinfo,hisPage:'change'}}">
						<span class="changeInfoBtn">修改资料</span>
					</router-link>

				</div>
				<div class="item" v-show="$route.params.status==2">
					<router-link :to="{name:'extInfo', params:{storeCode:this.jmsinfo.storeCode,areaId:this.jmsinfo.areaId}}">
						<div class="btnGroup">
               <span>提交补充资料</span>
             </div>
					</router-link>

				</div>
				<div class="item" v-show="false">
					<div class="changeInfoBtn" @click="gochangeInfo">提交门店地址</div>

				</div>

			</div>

			<div class="payForm" v-show="payBoxStatus">
				<mt-header title="发起缴费">
					<!--   <mt-button @click="payBoxHide"  icon="back" slot="left">返回</mt-button> -->
				</mt-header>

				<div class="payBody">
					<div class="splitLine"></div>
					<mt-field label="代理商类型:" readonly type="text">{{store[jmsinfo.type-1]}}</mt-field>
					<mt-field label="商户类型:" readonly type="text">{{["个人","公司"][jmsinfo.storeType-1]}}</mt-field>
					<mt-field label="代理区域:" readonly type="text">{{jmsinfo.storeAreaDescribe}}</mt-field>
					<mt-field label="姓名:" readonly>{{payer}}</mt-field>
					<mt-field label="联系电话:" readonly type="text" slot="left">{{jmsinfo.mobile}}</mt-field>
					<mt-field label="缴费类型:" readonly>
						<select class="selectPay" v-model="receiveProject">
							<option v-for="(item,index) in jiaofeiType" v-bind:value="item.id" :key="index">{{item.name}}</option>
						</select>
					</mt-field>
					<mt-field label="缴费金额:" v-model="moneySum" type="text" placeholder="请输入缴费金额">

					</mt-field>
					<mt-field label="缴费方式:" readonly>
						<input type="checkbox" v-model="pType" />线下支付
					</mt-field>

					<div class="btnGroup">

						<span @click="payBoxHide">取消</span>
						<span @click="goPayByType">确定</span>
					</div>

				</div>

			</div>
			<!--兴趣备注-->
			<msg-bz v-if="jmschangelist.length>0" :msgtext="jmschangelist[0].notice" :msgflag="msgflag" v-on:my-event="closeshow('msgflag')"></msg-bz>
			<!---->
			<!---->
			<!--状态追踪-->
			<state-zz :selectInx="Number(jmsinfo.agentStatus)" :jmsstates="jmsS" :stateflag="stateflag" v-on:my-event="closeStatus"></state-zz>
			<!---->
			<!--alert成功弹窗-->
			<alert-suc :asflag="asflag"></alert-suc>
			<!---->
			<!---->
			<!--alert弹窗-->
			<alert-ask :aaflag="aaflag" v-on:my-event="closeAaflag"></alert-ask>

		</div>
	</div>
</template>
<script>
	import { fetchGetData, fetchPostData, host } from "@/api";
	import MyHeader from "@/components/header";
	import MsgBz from "@/components/msgbz";
	import StateZz from "@/components/statezz";
	import AlertAsk from "@/components/alertask";
	import AlertSuc from "@/components/alertsuc";
	import Vue from "vue";
	import qs from "qs";
	import { Header, Button, Field, Radio, Toast, MessageBox } from "mint-ui";
	export default {
		data() {
			return {
				headerParam: {
					title: "基本资料详情",
					setting: 0,
					back: 1,
					state: 1
				},
				options: [],
				imgPre: "http://oss.miaoyouche.cn/view",
				store: ["体验店", "形象店"],
				jiaofeiType: [],
				pType: false,
				pTypeBox: [{
					label: '线下支付',
					value: '2'
				}],
				receiveProject: "1",
				payBoxStatus: false, //发起缴费
				paymentInfo: [],
				changeHistory: [],
				agencyStatus: false,
				jmsid: "",
				storeCode: "", //路由传参加盟商id
				jmsinfo: {}, //加盟商信息
				ywjl: "", // 业务经理
				sjjl: "", // 上级经理
				jmschangelist: [], //更改记录
				aleval: ["", "省级", "市级", "县级"],
				source: ["", "朋友介绍", "销售渠道", "线上渠道", "其他"],
				storeType: ["", "个人", "公司", "洗车店", "维修店", "保养店", "其他"],
				jyfw_Asc: [
					"",
					"装修",
					"洗车",
					"美容",
					"装饰服务",
					"配件销售",
					"保险",
					"汽车代销",
					"汽车租赁",
					"其他"
				],
				jmsstates: ["", "感兴趣", "需再沟通", "不感兴趣", "很感兴趣"], //加盟商状态
				jmsS: ["感兴趣", "需再沟通", "不感兴趣", "很感兴趣"],
				msgflag: false, //兴趣弹窗 flag
				stateflag: false, //更改状态弹窗flag
				aaflag: false, //询问弹窗flag
				asflag: false, //成功弹窗
				changeObj: {}, //更改状态参数,
				agencyBox: [],

				imgArr: [],
				//缴费

				payer: "",
				moneySum: "",
				agentStatusArr: [],
			};
		},
		components: {
			MyHeader,
			MsgBz,
			StateZz,
			AlertAsk,
			AlertSuc,
			Toast,
			MessageBox,
			Header,
			Field,
			Radio,
			Button
		},
		computed: {},
    created(){},
		mounted: function() {
			//意向加盟商id
			let that = this;

			if(that.$route.params.storeCode == undefined) {
				that.storeCode = sessionStorage.getItem("storeCode");
			} else {
				window.sessionStorage.setItem("storeCode", that.$route.params.storeCode);
			}
			var data = this.getStatus(10011);
			data.then(
				res => {

					that.payType = res;
				},
				err => {
					alert(err);
				}
			);
			var data = this.getStatus(10008);
			data.then(
				res => {
					this.jiaofeiType = res;
				},
				err => {
					alert(err);
				}
			);
			let vm = this;
			var data = this.getStatus(10033);
			data.then(function(value) {
				vm.agentStatusArr = value;
			}, function(err) {
				console.log(err);
			})
			that.getYxJmsInfo();

			that.showlevelStatus();

		},
		methods: {

			goPayByType() {
				let _that = this;
				if(!this.pType) {
					let form = new Object();
					form.moneySum = _that.moneySum;
					form.payer = _that.payer;
					form.receiveProject = _that.receiveProject;
					form.orderType = 1;
					form.agentCode = _that.jmsinfo.storeCode;
					if(!this.moneySum) {
						alert("请输入缴费金额");
						return false;
					}
					fetch(host + "/agent/store/addPayFee", {
							method: "POST",
							headers: {
								"Content-Type": "application/json"
							},
							body: JSON.stringify(form)
						}).then(res => res.text())
						.then(res => {
							var res = JSON.parse(res);
							if(res.status == 1) {
								_that.payBoxHide();

								Toast(res.message);
								window.location.reload();
							}

						})

				} else {

					this.$router.push({
						path: "/payment"
					});
				}
			},
			payBoxShow() {
				this.payBoxStatus = true;
			},
			payBoxHide() {
				this.payBoxStatus = false;
			},
			// dmimgs() {
			//   //店面照片

			//       if (!this.allInfo.listSysFileManage){
			//       this.imgArr=[];
			//       }
			//       if (this.allInfo.listSysFileManage.indexOf(",") != -1) {
			//         this.imgArr=this.allInfo.listSysFileManage.split(",");
			//       } else {
			//         this.imgArr=[this.allInfo.listSysFileManage];
			//       }
			// },
			dateOnline() {
				let that = this;
				var form = new FormData();
				form.append("mobile", this.jmsinfo.mobile);
				fetch(host + "/agent/proxy/signMsg", {
						method: "POST",
						body: form
					})
					.then(res => res.text())
					.then(res => {
						var res = JSON.parse(res);
						if(res.status == 1) {
							Toast("发送成功");
						} else {
							Toast("发送失败");
						}
					});
			},
			gochangeInfo() {
				this.$router.push({
					name: "editJmsInfo",
					params: {
						jmsid: this.jmsid
					}
				});
			},
			gopayment() {
				this.$router.push({
					name: "payment",
					params: {
						jmsid: this.jmsid
					}
				});
			},
			openshow(attr) {
				// 打开弹窗

				this[attr] = true;
			},
			closeshow(attr) {
				//关闭弹窗

				this[attr] = false;
			},
			closeStatus(param) {
				//关闭状态跟踪弹窗
				//status状态  notice备注
				this.stateflag = false;
				if(param != 0) {
					this.aaflag = true;
					this.changeObj = param;
					//   this.closeAaflag(param)
					this._params = param;
				} else {}
			},
			closeAaflag(param) {
				var _that = this;
				if(param) {
					let form = {};
					form.contents = this._params.notice;
					form.followStatus = this._params.status;
					form.follower = this.jmsinfo.name;
					// form.gmtModify=new Date().toLocaleString().split(" ")[0];
					form.storeCode = this.jmsinfo.storeCode;
					//点击确定按钮
					//网络请求
					console.log(form);
					fetch(host + "/agent/proxy/addStoreFollow", {
							method: "POST",
							headers: {
								"Content-Type": "application/json"
							},
							body: JSON.stringify(form)
						})
						.then(res => res.text())
						.then(res => {
							var res = JSON.parse(res);
							if(res.status == 1) {
								_that.asflag = true;
								window.setInterval(function() {
									_that.asflag = false;
								}, 1500);
							} else {
								Toast("修改失败");
								console.log(res);
							}
						});
				}

				this.aaflag = false;
			},
			showlevelStatus() {
				let _that = this;
				if(this.$route.params.storeCode != undefined) {
					var storeCode = this.$route.params.storeCode;
				} else {
					var storeCode = window.sessionStorage.getItem("storeCode");
				}

				fetch(host + "/agent/proxy/getStoreFollow?storeCode=" + storeCode, {
						method: "GET"
					})
					.then(res => res.text())
					.then(res => {
						var res = JSON.parse(res);
						if(res.status == 1) {
							_that.changeHistory = res.data.rows;
						}
					});
			},
			closeAsflag() {
				//关闭成功弹窗
				this.asflag = false;
				this.getYxJmsInfo();
				this.getJmschangeList();
			},
			//获取加盟商信息
			getYxJmsInfo() {
				if(this.$route.params.storeCode != undefined) {
					var storeCode = this.$route.params.storeCode;
				} else {
					var storeCode = window.sessionStorage.getItem("storeCode");
				}

				//获取加盟商信息
				let _that = this;
				fetch(host + "/agent/proxy/getStoreDetail?storeCode=" + storeCode, {
						method: "GET",
						headers: {
							"x-token": this.getSession("token")
						},
						async: false
					})
					.then(res => res.text())
					.then(res => {
						var res = JSON.parse(res);
						if(res.status == 1) {
							_that.allInfo = res.data;

							_that.jmsinfo = res.data.storeInfo;

							_that.paymentInfo = res.data.listAccCollections;
							_that.imgArr = res.data.listSysFileManage;
							_that.addSession("Allinfo", JSON.stringify(res.data));
							_that.addSession("info", JSON.stringify(res.data.storeInfo));
							_that.payer = res.data.storeInfo.name;
						}
					});
			},

		}
	};
</script>
<style lang="less" scoped>
	.payBtn {}
	
	.historyTitle {
		font-size: 0.4rem;
		font-weight: bold;
		margin-bottom: 15px;
	}
	
	.historyItem {
		color: #333333;
		font-size: 0.28rem;
		border: 1px solid #cccccc;
		width: 90%;
		margin: 15px auto;
		text-indent: 20px;
		padding: 0 10px;
		&>div>span {
			color: #333333;
			line-height: 0.6rem;
		}
		& div:nth-child(1) {
			color: #000;
		}
	}
	
	.split {
		height: 1px;
		clear: both;
		margin: 15px 0 0 0;
		border-top: 1px solid #cccccc;
	}
	
	.payForm {
		position: fixed;
		bottom: 0;
		background-color: #4A4A4A;
		text-align: center;
		z-index: 100000;
		width: 100%;
		padding-top: 4.12rem;
	}
	
	.payBody {
		margin: 0 auto;
	}
	
	.selectPay {
		line-height: 0.48rem;
		font-size: 0.3rem;
		padding: 2px 15px;
		border-radius: 5px;
		background-color: #fff;
	}
	
	.mint-header {
		background-color: #fff;
		height: 0.96rem;
		line-height: 0.96rem !important;
		font-size: 0.32rem;
		color: #222;
	}
	
	.titleICon {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: .18rem;
		height: .25rem;
		background-color: #FFCA4C;
	}
	
	.btnGroup {
		width: 100%;
		font-size: 0;
		span {
			display: inline-block;
			display: inline-block;
			font-size: .28rem;
			background-color: #FFCA4C;
			line-height: .9rem;
			width: 50%;
			box-sizing: border-box;
			text-align: center;
		}
		span:nth-child(1) {
			background-color: #ADADAD;
			color: #EEEEEE;
		}
		span:nth-child(2) {
			background-color: #FFCA4C;
			color: #433A27;
		}
	}
	
	.splitLine {
		background-color: #ECECEC;
		height: .14rem;
		width: 100%;
	}
	
	#header {
		background-color: #FFCA4C;
		font-size: .32rem;
	}
	
	.firstLine {
		position: relative;
	}
	
	.first_show {
		color: #FF573C;
		font-size: .28rem;
		position: absolute;
		line-height: .54rem;
		right: .23rem;
		top: .32rem;
	}
	
	.selectPay option {
		font-size: .28rem;
	}
	
	.itemBox {
		padding-top: 20px;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		.timeLine {
			width: .22rem;
			flex: 9;
			background: url(../../assets/images/myc/timeLine.png) no-repeat repeat center 10px;
			background-size: .22rem auto;
		}
		.timeBox {
			flex: 91;
			padding-right: 10px;
		}
	}
	
	.cutline {
		background-color: #F7F9FF;
		padding: 0.15rem 0;
		width: 100%;
		margin-top: 10px;
		border-radius: 10px;
		background: url(../../assets/images/myc/chatHistorybg.png) no-repeat 0 0;
		background-size: 100% 100%;
		.item1 {
			margin-top: 0;
			padding-left: 7%;
			font-size: 0;
		}
	}
	
	.item1-flag {
		display: inline-block;
		font-size: .28rem;
		width: 20%;
		line-height: .52rem;
		color: #666666;
	}
	
	.item1-con {
		display: inline-block;
		width: 70%;
	}
	
	.item1-con p {
		font-size: .28rem;
		line-height: .52rem;
	}
	
	.gmttime {
		color: #A9A9AA;
		font-size: .19rem;
	}
	
	.item-flag {
		font-size: .29rem;
		color: #666666;
	}
	
	.item-con p {
		color: #222222;
		font-size: .24rem;
		line-height: 1rem;
	}
  .iconEdit{
    position: absolute;
  top:11px;
  right: 0.16rem;
  width: 0.53rem;
  height: 0.53rem;
  background: url(../../assets/images/myc/edit.png) no-repeat center;
  background-size:100% 100%;
  }
</style>